import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15

Item {
    id: window
    visible: true
    width: 400
    height: 600

    property string qrCodeImagePath: "file:///F:/示例路径.png" // 默认二维码图片路径
    property bool isLoggedIn: false
    property bool showSettings: false

    // 主页面
    Rectangle {
        id: mainPage
        anchors.fill: parent
        color: "#f5f5f5"
        visible: !isLoggedIn && !showSettings

        // 标题栏
        Rectangle {
            id: titleBar
            anchors.top: parent.top
            anchors.left: parent.left
            anchors.right: parent.right
            height: 60
            color: "#ffffff"

            // 标题
            Text {
                anchors.centerIn: parent
                text: "扫码登录"
                font.pixelSize: 18
                font.bold: true
                color: "#333333"
            }

            // 设置按钮
            Rectangle {
                id: settingsButton
                anchors.right: parent.right
                anchors.verticalCenter: parent.verticalCenter
                anchors.rightMargin: 15
                width: 40
                height: 40
                color: settingsButtonArea.pressed ? "#e0e0e0" : "transparent"
                radius: 20

                // 设置图标
                Text {
                    anchors.centerIn: parent
                    text: "⚙️"
                    font.pixelSize: 18
                }

                MouseArea {
                    id: settingsButtonArea
                    anchors.fill: parent
                    onClicked: showSettings = true
                }
            }

            // 底部分割线
            Rectangle {
                anchors.bottom: parent.bottom
                anchors.left: parent.left
                anchors.right: parent.right
                height: 1
                color: "#e0e0e0"
            }
        }

        // 主要内容区域
        Rectangle {
            anchors.top: titleBar.bottom
            anchors.left: parent.left
            anchors.right: parent.right
            anchors.bottom: parent.bottom
            color: "#f5f5f5"

            Column {
                anchors.centerIn: parent
                spacing: 30

                // 二维码显示区域
                Rectangle {
                    width: 250
                    height: 250
                    color: "#ffffff"
                    border.color: "#e0e0e0"
                    border.width: 1
                    radius: 10
                    anchors.horizontalCenter: parent.horizontalCenter

                    // 二维码图片或占位符
                    Item {
                        anchors.fill: parent
                        anchors.margins: 20

                        Image {
                            id: qrCodeImage
                            anchors.fill: parent
                            source: qrCodeImagePath
                            fillMode: Image.PreserveAspectFit
                            cache: false // 禁用缓存确保图片更新
                            asynchronous: true // 异步加载

                            // 添加调试信息
                            onStatusChanged: {
                                console.log("Image status changed:", status)
                                console.log("Image source:", source)

                                if (status === Image.Error) {
                                    console.log("Image load error")
                                } else if (status === Image.Ready) {
                                    console.log("Image loaded successfully")
                                    console.log("Image size:", sourceSize.width, "x", sourceSize.height)
                                }
                            }
                        }

                        // 占位符
                        Rectangle {
                            anchors.fill: parent
                            color: "#f8f8f8"
                            visible: qrCodeImagePath === "" || qrCodeImage.status === Image.Error || qrCodeImage.status === Image.Null

                            Column {
                                anchors.centerIn: parent
                                spacing: 10

                                Text {
                                    text: "📱"
                                    font.pixelSize: 48
                                    anchors.horizontalCenter: parent.horizontalCenter
                                    color: "#cccccc"
                                }

                                Text {
                                    text: {
                                        if (qrCodeImagePath === "") {
                                            return "请点击右上角设置按钮\n设置二维码图片"
                                        } else if (qrCodeImage.status === Image.Error) {
                                            return "二维码图片加载失败\n请检查图片路径"
                                        } else if (qrCodeImage.status === Image.Loading) {
                                            return "正在加载图片..."
                                        } else {
                                            return "图片未加载"
                                        }
                                    }
                                    font.pixelSize: 14
                                    color: "#999999"
                                    horizontalAlignment: Text.AlignHCenter
                                    anchors.horizontalCenter: parent.horizontalCenter
                                }

                                // 显示当前图片路径用于调试
                                Text {
                                    text: "路径: " + qrCodeImagePath
                                    font.pixelSize: 10
                                    color: "#cccccc"
                                    horizontalAlignment: Text.AlignHCenter
                                    anchors.horizontalCenter: parent.horizontalCenter
                                    visible: qrCodeImagePath !== ""
                                    wrapMode: Text.WordWrap
                                    width: parent.width
                                }
                            }
                        }
                    }
                }

                // 提示文字
                Text {
                    text: {
                        if (qrCodeImagePath === "" || qrCodeImage.status === Image.Error || qrCodeImage.status === Image.Null) {
                            return "请先设置二维码图片"
                        } else if (qrCodeImage.status === Image.Loading) {
                            return "正在加载图片..."
                        } else {
                            return "请使用手机扫描上方二维码"
                        }
                    }
                    font.pixelSize: 16
                    color: "#666666"
                    anchors.horizontalCenter: parent.horizontalCenter
                }

                // 登录按钮
                Rectangle {
                    id: loginButton
                    width: 200
                    height: 45
                    anchors.horizontalCenter: parent.horizontalCenter
                    color: (qrCodeImagePath !== "" && qrCodeImage.status === Image.Ready) ?
                           (loginButtonArea.pressed ? "#1976d2" : "#2196f3") :
                           "#cccccc"
                    radius: 8

                    Text {
                        anchors.centerIn: parent
                        text: "确认登录"
                        font.pixelSize: 16
                        color: "white"
                    }

                    MouseArea {
                        id: loginButtonArea
                        anchors.fill: parent
                        enabled: qrCodeImagePath !== "" && qrCodeImage.status === Image.Ready
                        onClicked: {
                            if (enabled) {
                                isLoggedIn = true
                            }
                        }
                    }
                }

                // 其他登录方式
                Text {
                    text: "其他登录方式"
                    font.pixelSize: 14
                    color: "#2196f3"
                    anchors.horizontalCenter: parent.horizontalCenter

                    MouseArea {
                        anchors.fill: parent
                        onClicked: {
                            // 这里可以添加其他登录方式的逻辑
                            console.log("点击了其他登录方式")
                        }
                    }
                }
            }
        }
    }

    // 设置页面
    Rectangle {
        id: settingsPage
        anchors.fill: parent
        color: "#f5f5f5"
        visible: showSettings

        // 标题栏
        Rectangle {
            id: settingsTitleBar
            anchors.top: parent.top
            anchors.left: parent.left
            anchors.right: parent.right
            height: 60
            color: "#ffffff"

            // 返回按钮
            Rectangle {
                anchors.left: parent.left
                anchors.verticalCenter: parent.verticalCenter
                anchors.leftMargin: 15
                width: 40
                height: 40
                color: backButtonArea.pressed ? "#e0e0e0" : "transparent"
                radius: 20

                Text {
                    anchors.centerIn: parent
                    text: "←"
                    font.pixelSize: 20
                    color: "#2196f3"
                }

                MouseArea {
                    id: backButtonArea
                    anchors.fill: parent
                    onClicked: showSettings = false
                }
            }

            // 标题
            Text {
                anchors.centerIn: parent
                text: "设置"
                font.pixelSize: 18
                font.bold: true
                color: "#333333"
            }

            // 底部分割线
            Rectangle {
                anchors.bottom: parent.bottom
                anchors.left: parent.left
                anchors.right: parent.right
                height: 1
                color: "#e0e0e0"
            }
        }

        // 设置内容
        Column {
            anchors.top: settingsTitleBar.bottom
            anchors.left: parent.left
            anchors.right: parent.right
            anchors.margins: 20
            spacing: 20

            // 图片路径设置
            Column {
                anchors.left: parent.left
                anchors.right: parent.right
                spacing: 10

                Text {
                    text: "二维码图片路径"
                    font.pixelSize: 16
                    color: "#333333"
                }

                TextField {
                    id: pathInput
                    anchors.left: parent.left
                    anchors.right: parent.right
                    height: 40
                    text: qrCodeImagePath
                    placeholderText: "请输入图片路径，如：file:///C:/path/to/image.png"

                    background: Rectangle {
                        color: "#ffffff"
                        border.color: pathInput.focus ? "#2196f3" : "#e0e0e0"
                        border.width: 1
                        radius: 8
                    }
                }

                Text {
                    text: "支持本地文件路径(file://)、资源路径(qrc:/)或网络路径(http://)"
                    font.pixelSize: 12
                    color: "#999999"
                }
            }



            // 实时预览
            Column {
                anchors.left: parent.left
                anchors.right: parent.right
                spacing: 10

                Text {
                    text: "实时预览"
                    font.pixelSize: 16
                    color: "#333333"
                }

                Rectangle {
                    width: 150
                    height: 150
                    color: "#ffffff"
                    border.color: "#e0e0e0"
                    border.width: 1
                    radius: 8
                    anchors.horizontalCenter: parent.horizontalCenter

                    Image {
                        id: previewImage
                        anchors.fill: parent
                        anchors.margins: 10
                        source: pathInput.text.trim()
                        fillMode: Image.PreserveAspectFit
                        cache: false
                        asynchronous: true

                        onStatusChanged: {
                            console.log("Preview image status:", status)
                            console.log("Preview image source:", source)
                        }
                    }

                    Text {
                        anchors.centerIn: parent
                        text: {
                            if (pathInput.text.trim() === "") {
                                return "无预览"
                            } else if (previewImage.status === Image.Loading) {
                                return "加载中..."
                            } else if (previewImage.status === Image.Error) {
                                return "加载失败"
                            } else {
                                return ""
                            }
                        }
                        font.pixelSize: 12
                        color: "#999999"
                        visible: previewImage.status !== Image.Ready
                    }
                }
            }

            // 保存按钮
            Rectangle {
                width: 120
                height: 40
                anchors.horizontalCenter: parent.horizontalCenter
                color: saveButtonArea.pressed ? "#1976d2" : "#2196f3"
                radius: 8

                Text {
                    anchors.centerIn: parent
                    text: "保存设置"
                    font.pixelSize: 14
                    color: "white"
                }

                MouseArea {
                    id: saveButtonArea
                    anchors.fill: parent
                    onClicked: {
                        var inputPath = pathInput.text.trim()
                        console.log("Saving path:", inputPath)

                        if (inputPath === "") {
                            console.log("Path is empty")
                            return
                        }

                        // 直接使用用户输入的路径
                        qrCodeImagePath = inputPath
                        console.log("New qrCodeImagePath:", qrCodeImagePath)

                        showSettings = false
                    }
                }
            }
        }
    }

    // 登录成功页面
    Rectangle {
        id: successPage
        anchors.fill: parent
        color: "#f5f5f5"
        visible: isLoggedIn

        Column {
            anchors.centerIn: parent
            spacing: 30

            // 成功图标
            Text {
                text: "✅"
                font.pixelSize: 80
                anchors.horizontalCenter: parent.horizontalCenter
            }

            // 成功文字
            Text {
                text: "登录成功！"
                font.pixelSize: 24
                font.bold: true
                color: "#4caf50"
                anchors.horizontalCenter: parent.horizontalCenter
            }

            Text {
                text: "欢迎回来"
                font.pixelSize: 16
                color: "#666666"
                anchors.horizontalCenter: parent.horizontalCenter
            }

            // 返回按钮
            Rectangle {
                width: 150
                height: 40
                anchors.horizontalCenter: parent.horizontalCenter
                color: returnButtonArea.pressed ? "#e0e0e0" : "#ffffff"
                border.color: "#2196f3"
                border.width: 1
                radius: 8

                Text {
                    anchors.centerIn: parent
                    text: "返回登录页"
                    font.pixelSize: 14
                    color: "#2196f3"
                }

                MouseArea {
                    id: returnButtonArea
                    anchors.fill: parent
                    onClicked: {
                        isLoggedIn = false
                        showSettings = false
                    }
                }
            }
        }
    }
}
